<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="../static/layui-v2.2.5/layui/css/layui.css"/>
    <style>
        .container{
            width: 500px;
            margin: 100px auto;
            border: 1px solid #ddd;
            padding: 10px 30px 30px 30px;
        }
        .container  h2{
            text-align: center;
            padding-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <form class="layui-form" action="/login" method="post" >
      <h2>用户登录</h2>
        <div class="layui-form-item">
            <label class="layui-form-label">管理员</label>
            <div class="layui-input-block">
              <select name="role" lay-verify="" lay-search>
                  <option value="2">管理员</option>
                  <option value="1">普通用户</option>
              </select>
            </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
          <input type="text" name="mobile" required  lay-verify="required" placeholder="请输入手机号码" value="18380458545" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
          <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" value="123456" autocomplete="off" class="layui-input">
            <span style="color: red">{{error}}</span>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">登 录</button>
          <button type="reset" class="layui-btn layui-btn-primary">重 置</button>
        </div>
      </div>
    </form>
</div>

<script src="../static/layui-v2.2.5/layui/layui.js"></script>
<script src="../static/jquery-3.7.1.min.js"></script>
<script>
//Demo
layui.use('form', function(){
      var form = layui.form;
      form.on('submit(*)', function(data){
      console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
      console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
      console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
    });

});
</script>
</body>
</html>